<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="card-header">
        <div class="logo">
          <img src="@/assets/images/blogo.png" alt="logo" draggable="false" />
        </div>
        <!-- <div class="title">人事管理系统</div> -->
      </div>
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules">
        <el-form-item prop="username">
          <el-input
            prefix-icon="el-icon-user-solid"
            v-model="loginForm.username"
            clearable
            placeholder="用户名"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            type="password"
            clearable
            v-model="loginForm.password"
            placeholder="密码"
          />
        </el-form-item>
        <el-form-item class="mg-bt-10" prop="code">
          <el-col :span="17">
            <el-input
              prefix-icon="el-icon-s-promotion"
              v-model="loginForm.code"
              clearable
              placeholder="验证码"
              @keyup.enter.native="handleLogin"
            />
          </el-col>
          <el-col :span="6" class="captcha">
            <el-image :src="captcha" @click="getCaptcha" alt="验证码" title="点击切换" />
          </el-col>
        </el-form-item>
        <el-form-item class="mg-bt-10">
          <el-checkbox v-model="isRememberme" label="自动登录"></el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button :loading="btnLoading" type="primary" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { loginApi, getCaptchaApi, getUserByTokenApi } from "@/api/login.js";
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456",
        key: "",
        code: "",
      },
      isRememberme: false,
      captcha: "",
      btnLoading: false,
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getCaptcha();
    this.handleAutoLogin();

  },
  methods: {
    // 处理登录逻辑
    handleLogin() {
      console.log("登陆")
      console.log(this.loginForm)
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        try {
          this.btnLoading = true;
          const { data, code } = await loginApi(this.loginForm);
          if (code !== 200) return;
          data.isRememberme = this.isRememberme;
          this.$store.dispatch("LoginSuccess", data);
          this.$message.success("登录成功");
          this.$router.push("/home");
        } finally {
          this.btnLoading = false;
        }
      });
    },
    // 获取验证码
    async getCaptcha() {
      const { code, data } = await getCaptchaApi();
      if (code !== 200) return;
      this.captcha = data.captcha;
      this.loginForm.key = data.key;
    },

    // 自动登录逻辑
    async handleAutoLogin() {
      const token = this.$store.state.userModule.token;
      // 若有token并且未登录，自动登录
      if (token && !this.$store.getters.isLogin) {
        const { data, code } = await getUserByTokenApi();
        if (code !== 200) return;
        data.token = token;
        data.isRememberme = true;
        this.$store.dispatch("LoginSuccess", data);
        this.$message.success("已为您自动登录...");
        this.$router.push("/home");
      }
    },
  },
};
</script>

<style scoped lang="scss">
/deep/ .el-card__header {
  padding: 8px 20px;
  text-align: center;
}
.logo {
  height: 50px;
  img {
    height: 100%;
  }
}

.login {
  background: url("~@/assets/images/bg.png") center no-repeat;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-card {
  width: 380px;
}
.captcha {
  .el-image {
    height: 40px;
    margin-left: 10px;
    object-fit: contain;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    border-radius: 4px;
  }
  line-height: 0px;
}

.el-button {
  width: 100%;
}
.mg-bt-10 {
  margin-bottom: 10px;
}
</style>
